html{
    height: 100%;
    background-color: black;
}

body {
    height: 100%;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/*顶栏*/
header {
    background-color: #000000;
    color: #fff;
    padding: 10px;
    height: 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 20px;
    margin-left: 20px;
}

#logo_container{
    display: flex;
    align-items: center;
}

#logo{
    color: #F9C73D;
    font-size: 24px;
    font-weight: bold;
    margin-right: 10px;
    z-index: 1;
}

#logo:hover{
    font-size: 30px;
    transition: 0.2s;
}

.icon{
    height: 30px;
    width: 30px;
    z-index: 1;
}

#user {
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
#user a{
    margin-right: 10px;
}

#user_img{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}

/*main*/
#main{
    background-color: black;
}
/*main*/

/*图片滑动*/
.slideshow-container {
    margin-top: 10px;
    width: 100%;
    height: 400px;
    /*margin: 0 auto;*/
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide img {
    max-width: 100%; /* 设置图片最大宽度为容器的100% */
    max-height: 100%; /* 设置图片最大高度为容器的100% */
    width: auto; /* 让图片的宽度自适应 */
    height: auto; /* 让图片的高度自适应 */
    display: block; /* 让图片以块级元素显示，确保max-width和max-height生效 */
    margin: 0 auto; /* 居中图片 */
    border-radius: 20px;
}

/*图片滑动*/

/*分类区*/
.category-bar {
    background-color: #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    /*padding: 10px;*/
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
          }
.category-bar h2 {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}
.category-sections {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-bottom: 20px;
}
/*.category-section {*/
/*    margin-bottom: 20px;*/
/*    width: 45%;*/
/*}*/
/*.category-section h3 {*/
/*    margin-bottom: 10px;*/
/*    color: #ffffff;*/
/*    text-align: center;*/
/*}*/
.category-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.category-list li {
    background-color: #2c2d2f;
    color: #fff;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    z-index: 1;
}
.category-list li:hover {
    background-color: #F9C73D;
    color: #2c2d2f;
}
.category-list li.selected{
    background-color: #F9C73D;
    color: #2c2d2f;
}
/*分类区*/

/*展示电影列表*/
.movie-list {
    /*width: 100%;*/
    width: calc(100% - 40px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 中央对齐 */
    padding-top: 30px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
}

.movie-list-detail {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    justify-content: space-between; /* 空间均匀分布 */
    gap: 20px; /* 项目之间的间距 */
}

.movie-list-detail li {
    /*flex: 1 1 calc(20% - 40px); !* 每行5个项目，每个项目占20%的宽度，减去间距 *!*/
    flex: 1 1 calc(20% - 20px);
    margin-bottom: 40px; /* 调整底部间距 */
    border-radius: 10px;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    /*background-color: #333; !* 背景颜色，方便查看效果 *!*/
}

.movie-list-detail li:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.movie-title {
    font-size: 18px;
    color: white;
    text-align: center;
    margin: 10px 0;
}

.movie-item {
    width: 200px; /* 占满父元素宽度 */
    height: 300px;
    /*padding-bottom: 120%; !* 高度相对于宽度的比例 *!*/
    overflow: hidden; /* 隐藏超出部分 */
    border-radius: 10px;
    position: relative; /* 位置相对 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222; /* 背景颜色，方便查看效果 */
}

.movie-item img {
    width: 200px;
    height: 300px;
    object-fit: cover; /* 裁剪图片 */
    transition: transform 0.2s;
}

/*.movie-item vip-icon {*/
/*    position: absolute;*/
/*    top: 10px; !* 调整图标位置 *!*/
/*    right: 10px; !* 调整图标位置 *!*/
/*    width: 5px; !* 调整图标大小 *!*/
/*    height: 5px; !* 调整图标大小 *!*/
/*    z-index: 10;*/
/*}*/

.movie-item img:hover {
    transform: scale(1.05);
}
/*展示电影列表*/

/*分页*/
/*分页按钮*/
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.pagination button {
    background-color: #2c2d2f;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.pagination button:hover {
    background-color: #F9C73D;
}

.pagination span {
    color: #fff;
}
/*分页*/

/*图表*/
/* 添加flexbox布局样式 */
#chartsContainer {
    padding: 30px;
    display: flex;
    justify-content: space-between;
}
.chart {
    width: 45%; /* 调整图表宽度以适应布局 */
    height: 400px;
}

/*底层*/
footer {
    background-color: #333;
    color: #fff;
    padding: 0px;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
}
